{extend name="public/base" /} 
{block name="style"}
	<link href="__CSS__/cash.css" rel="stylesheet">	
	<style>
		.s_active{
			background-color: #0D8DDB;
			color: #fff;
			font-size: 14px;
		}
		.m_input{
			width: 50px!important;
		    text-align: center;
		    height: 30px;
		    border: 1px solid #EEE;
		    -webkit-border-radius: 0!important;
		    -moz-border-radius: 0!important;
		    border-radius: 0!important;
		    line-height: 28px!important;
		}
		.sk_table tr td{
			border: 1px #e7eaec solid;height:40px;line-height:40px;
			text-align: center;
		}
	</style>
{/block}
{block name="body"}
<div class=" gray-bg" data-scroll="y" data-scroll-destroy="true" id="container" scroll="true">
	<div id="gd_box" class="ibox-content" style="width:47%;height:500px;float: left;margin-top: 20px;margin-left: 20px;">
		<div class="  animated fadeInRight">
			<div class="input-group m-b">
                <div class="input-group-btn">
                    <button tabindex="-1" id="goods_type"  class="btn btn-white s_active" type="button">商品分类</button>
                    <button data-toggle="dropdown" class="btn btn-white dropdown-toggle" type="button" aria-expanded="false"><span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                    	 <li data-id="0" data-name="全部分类"><a>全部分类</a>
                      	{foreach name="types" id="tp"}
                      	 <li data-id="{$tp.id}" data-name="{$tp.name}"><a>{$tp.name}</a>
                       	 </li>
                      	{/foreach}
                    </ul>
                </div>
                <input type="text" id="skey" class="form-control" placeholder="搜索商品编号或名称" >
                  <span class="input-group-addon" > <img  onclick="get_goods_list(null);" src="__IMG__/search.png" /></span>
            </div>
		</div>
		 <table class="table  table-hover tcash">
                <thead>
                <tr class="long-tr text-center">
                	<th>商品编号</th>
                    <th>名称</th>
                    <th>库存</th>
                    <th>积分</th>
                    <th>单位</th>
                    <th>操作</th>
                </tr>
            	</thead>
         </table>
        <div style="overflow-y: scroll;height: 400px;">
        <table class="table table-hover">
            <tbody id="goods_list" class=" text-left">
            	{volist name="goods" id='gd'}
            	<tr>
            	<td width="100px">{$gd.goods_no}</td>
            	<td width="100px">{$gd.goods_name}</td>
            	<td>{$gd.stock}</td>
            	<td>{$gd.exchange_bouns}</td>
            	<td>{$gd.unit}</td>
            	<td><span data-exchange_bouns="{$gd.exchange_bouns}" data-stock="{$gd.stock}" data-id="{$gd.id}" data-no="{$gd.goods_no}" data-name="{$gd.goods_name}" style="font-size: 24px" onclick="select_goods(this,1)">+</span></td>
            	</tr>
            	{/volist}
            </tbody>
        </table>
        </div>
   </div>
	<div id="pk_box" class="ibox-content" style="width:47%;height:500px;display:inline-block;margin-top: 20px;margin-left: 20px;">
		<div class="row" style="margin-top: 5px;">
			<div class="input-group m-b">
		        <input type="text" id="key" name="key" class="form-control" placeholder="搜索会员卡号/手机号/姓名">
		        <span class="input-group-addon" > <img src="__IMG__/search.png" /></span>
		        <span class="input-group-addon" onclick="adduser()"><img src="__IMG__/adduser.png" /></span>
		    </div>
		</div>
		<div  id="member_info" style="display: none;" >
			<p><span class="m_rs_pan">会员卡号：</span><span id="no"></span><span class="card_type">王者(无折扣)</span></p>
			<p><th class="m_rs_pan">姓名：<span id="name"></span></th>
		   		<span class="m_rs_pan">手机号：<span id="mobile"></span></span>
			   	<span class="m_rs_pan">余额：<span id="money"></span></span>
		    	<span class="m_rs_pan">积分：<span id="score"></span></span>
			</p>
		</div>
 		<div class="row line" ></div>
		<div class="  animated fadeInRight">
			<div class="input-group m-b" style="width:100%;text-align: center;">
               	<span class="b_rs_pan" style="font-size: 24px;float: left;">积分:&nbsp;&nbsp;&nbsp;</span>
               	<span id="total_exchange_bouns" style="float: left;color: red;" class="b_rs_pan">0</span></span> 
               	<span class="b_rs_pan" >商品列表</span>
            </div>
		</div>
		<table class="table  table-hover tcash">
                <thead>
                <tr class="long-tr text-center">
                    <th>名称</th>
                    <th >积分</th>
                    <th >数量</th>
                    <th >小计</th>
                    <th >操作</th>
                </tr>
            </thead>
         </table>
        <div style="overflow-y: scroll;height: 400px;">
        <table class="table table-hover">
            <tbody id="goods_cart" class=" text-left"></tbody>
        </table>
		</div>
	</div>
</div>
<div class=" gray-bg" data-scroll="y" data-scroll-destroy="true" id="container1" style="display: none;" scroll="true">
	<div  style="width:570px;display:inline-block;float: left;margin-top: 40px;margin-left: 20px;background-color: #fff;">
  		<input type="hidden" name="line_member_id" id="line_member_id" />
	</div>
</div>
<div class="row" style="z-index:100;width:100%;margin-left: 20px;position: absolute;bottom: 30px;background-color: #CCCCCC;">
	<span style="margin-left:250px;">
    <button class="btn btn-primary p-btn" style="background-color: #CA4440;" type="button" onclick="confirm_sk()">兑换</button>
    <button class="btn btn-white p-btn" type="button" onclick="reset_gd()">清空</button>
    </span>
</div>
{/block} {block name="script"}
<script>
  	var cartlist={};
	function del_order(id){
		layer.confirm('确定删除?', {icon: 3, title:'提示'}, function(index){
		  $.ajax({
				url:'del_order',
				data:{"id":id},
				type:"post",
				success: function(data) {
					layer.msg("删除成功");
				}
			})
		 
		});
	}
	$(".dropdown-menu li").click(function(){
		var goods_typeid=$(this).attr('data-id');
		$("#goods_type").text($(this).attr('data-name'));
		get_goods_list({'goods_typeid':goods_typeid});
	})
	function get_goods_list(dt){
			if(dt==null){
				var skey=$("#skey").val();
				dt={'key':skey};
			}
			$.ajax({
				url:'get_goods_list',
				data:dt,
				type:"post",
				success: function(data) {
					var html="";
					var res=data.data;
					if(res==null){
						return;
					}
					for(var i=0;i<res.length;i++){
						var gd=res[i];
						var tr='<tr>'+
	                	'<td>'+gd.goods_no+'</td>'+
	                	'<td>'+gd.goods_name+'</td>'+
	                	'<td>'+gd.stock+'</td>'+
	                	'<td>'+gd.exchange_bouns+'</td>'+
	                	'<td>'+gd.unit+'</td>'+
	                	'<td><span data-exchange_bouns="'+gd.exchange_bouns+'" data-stock="'+gd.stock+'" data-id="'+gd.id+'" data-name="'+gd.goods_name+'" style="font-size: 24px" onclick="select_goods(this,1)">+</span></td>'+
	                	'</tr>';
	                	html+=tr;
					}
					$("#goods_list").html(html);
				}
			})
	}
	function select_goods(obj,type){
		var goods_names="";
		var arr={};
		if(type==2){
			goods_names=$(obj).attr("data-goods");
			arr['goods_names']=goods_names;
		}else{
			arr['goods_names']="";
		}
		var id=$(obj).attr("data-id");
		var name=$(obj).attr("data-name");
		var exchange_bouns=$(obj).attr("data-exchange_bouns");
		var cart=cartlist[id+type];
		if(cart!=null){
			cartlist[id+type]['total_exchange_bouns']=parseFloat(cartlist[id+type]['total_exchange_bouns'])+parseFloat(exchange_bouns);
			cartlist[id+type]['num']=cartlist[id+type]['num']+1;
		}else{
			arr['type']=type;
			arr['name']=name;
			arr['exchange_bouns']=exchange_bouns;
			arr['total_exchange_bouns']=exchange_bouns;
			arr['num']=1;
			arr['sid']=id;
			arr['is_zs']=0;//是否赠送
			cartlist[id+type]=arr;		
		}
		var has=$("#goods_"+id+type);
		if(has.val()==undefined){
			var html='<tr>'+
				 '<td width="125px">'+name+'</br>'+goods_names+'</td>'+
				 '<td width="100px">'+exchange_bouns+'</td>'+
				 '<td width="140px"><input data-name='+id+type+'  id=goods_'+id+type+'  class="m_input" type="text" value=1 /></td>'+
				 '<td width="120px" id=total_'+id+type+'>'+exchange_bouns+'</td>'+
				 '<td data-name='+id+type+' style="font-size:16px;"><span class="zs_pan" data-name='+id+type+' >赠</span>&nbsp;&nbsp;<span class="del_pan" data-name='+id+type+' >删</span></td>'+
				 '</tr>';
			$("#goods_cart").append(html);
			setEvent();
		}else{
			has.val(parseFloat(has.val())+1);
			$("#total_"+id+type).text(parseFloat($("#total_"+id+type).text())+parseFloat(exchange_bouns));
		}
	 	var total_exchange_bouns=parseFloat($("#total_exchange_bouns").text())+parseFloat(exchange_bouns);
		$("#total_exchange_bouns").text(total_exchange_bouns);
	}
	
	function setEvent(){
  		$("#goods_cart .m_input").change(function(){
  			change_goods(this);
  		})
  		$("#goods_cart .zs_pan").unbind('click').click(function(){
  			zs_goods(this);
  		})
  		$("#goods_cart .del_pan").unbind('click').click(function(){
  			del_goods(this);
  		})
  	}
	
	/**
	 * 赠送商品
	 */
	function zs_goods(obj){
		$(obj).toggleClass("zs_active");
		var ckey=$(obj).data("name");
		$("#total_"+ckey).toggleClass("zs_total");
		var is_zs=cartlist[ckey]["is_zs"];
		var total_price=parseFloat($("#total_exchange_bouns").text());		
		if(is_zs==1){
			cartlist[ckey]["is_zs"]=0;
			total_price+=parseFloat(cartlist[ckey]['total_exchange_bouns']);
			$("#total_exchange_bouns").text(total_price);
		}else{
			total_price-=parseFloat(cartlist[ckey]['total_exchange_bouns']);
			$("#total_exchange_bouns").text(total_price);
			cartlist[ckey]["is_zs"]=1;
		}
//		$(obj).parent().parent().remove();
//		layer.close(con);
		
	}
	/**
	 * 删除购物车商品
	 */
	function del_goods(obj){
		var con=layer.confirm('确定删除?', function(index){
			var total_price=parseFloat($("#total_exchange_bouns").text());
			var ckey=$(obj).data("name");
			var is_zs=cartlist[ckey]["is_zs"];
			if(is_zs==0){
				total_price-=parseFloat(cartlist[ckey]['total_exchange_bouns']);
				$("#total_exchange_bouns").text(total_price);
			}
			delete(cartlist[ckey]);
			$(obj).parent().parent().remove();
			layer.close(con);
			
		});
		
	}
	/**
	 * 改变商品数量
	 */
	function change_goods(obj){
		var ckey=$(obj).data("name");
		var num=parseFloat($(obj).val());
		$total_price=num*cartlist[ckey]['exchange_bouns'];
		var total_price1=parseFloat($("#total_exchange_bouns").text());
		var is_zs=cartlist[ckey]["is_zs"];
		if(is_zs==0){
			total_price1+=parseFloat($total_price-parseFloat(cartlist[ckey]['total_exchange_bouns']));
			$("#total_exchange_bouns").text(total_price1);
		}
		cartlist[ckey]['num']=$(obj).val();
		cartlist[ckey]['total_exchange_bouns']=$total_price;
		$("#total_"+ckey).text($total_price);
	}
	
	$("#key").autocomplete({
		url:'get_emps',
		data:{key:$("#key").val()},
		css:{
			'width':'88%',
			'border':'0',
		},
		postname:'id'
	});
	function confirm_sk(){
		if($.isEmptyObject(cartlist)){
			layer.msg("您未添加任何购买商品!")
			return false;
		}
		console.log(cartlist);
		
		if($("#key").val()==""){
			layer.msg("请选择会员!");
			return false;
		}
		var payscore = parseFloat($("#total_exchange_bouns").text());
		var score = parseFloat($("#score").text());
		if(score<payscore){
			layer.msg("积分不足!");
			return false;
		}
		var html='<div class="row" >'+
						'<div style="text-align: center;">'+
							'<span id="sp_price" style="font-size:26px;font-weight:600;color:#35b12c">'+payscore+'</span>'+
							'<p>消耗积分</p>'+
						'</div>'+
				   '</div>'+
				   '<div class="row" >'+
						'<div style="float: left;width:50%;text-align: center;">'+
							'<span>会员卡号</span>&nbsp<label>'+$("#no").text()+'</label>'+
						'</div>'+
						'<div style="float: left;width:50%;text-align: center;">'+
							'<span>兑换后余额</span>&nbsp<label>'+ parseFloat($("#money").text())+'</label>'+
						'</div>'+
				   '</div>'+
					'<div class="row" >'+
						'<div style="float: left;width:50%;text-align: center;">'+
							'<span>手机号</span>&nbsp<label>{$mobile}</label>'+
						'</div>'+
						'<div style="float: left;width:50%;text-align: center;">'+
							'<span>兑换后积分</span>&nbsp<label>'+parseFloat($("#score").text()-payscore)+'</label>'+
						'</div>'+
				   '</div>'+				   
				   '<div class="row" >'+
						'<div style="float: left;width:50%;text-align: center;">'+
							'<span>门店</span>&nbsp<label>{$store_name}</label>'+
						'</div>'+
						'<div style="float: left;width:50%;text-align: center;">'+
							'<span>收银员</span>&nbsp<label>{$mobile}</label>'+
						'</div>'+
				   '</div>';
		var index=layer.open({
		  title: '确认兑换',
		  zIndex :1999,
	 	  area: ['500px', '300px'] ,
		  content: html,
		  btn: ['确定','取消'],
		  yes: function(index, layero){
		    //按钮【按钮一】的回调
		    	$.ajax({
					url:'exchangecz',
					data:{data:cartlist,score:score,pay_score:parseFloat($("#total_exchange_bouns").text()),no:$("#no").text(),line_member_id:$("#line_member_id").val()},
					type:"post",
					success: function(data) {
						layer.close(index);
						callback(data);
						reset_gd();
					}
				})
		  },btn2:function(index,layero){
		  	layer.close(index);
		  }
		});

	}
	
	function callback(data){
		if(data.code==200){
			var info=data.data;
			 var html='<div>'+
					'<div style="text-align: center;">'+
					'<i class="fa fa-check" style="color: #35b12c;font-size: 60px;font-weight: 600;"></i>'+
					'<p><span class="b_rs_pan">收款成功</span> </p>'+
					'</div>'+
					'<div class="form-group" style="padding-left: 100px;"><label class="col-sm-5 control-label">会员卡号：</label><div class="input-group col-sm-7">'+info.member_no+'</div></div>'+
					'<div class="form-group" style="padding-left: 100px;"><label class="col-sm-5 control-label">手机号：</label><div class="input-group col-sm-7">'+info.mobile+'</div></div>'+
					'<div class="form-group" style="padding-left: 100px;"><label class="col-sm-5 control-label">兑换后余额：</label><div class="input-group col-sm-7">'+parseFloat(info.newblanceflg).toFixed(2)+'</div></div>'+
					'<div class="form-group" style="padding-left: 100px;"><label class="col-sm-5 control-label">兑换后积分：</label><div class="input-group col-sm-7">'+info.newbonusflg+'</div></div>'+
					'<div class="form-group" style="padding-left: 100px;"><label class="col-sm-5 control-label">单号：</label><div class="input-group col-sm-7">'+info.log_no+'</div></div>'+
					'<div class="form-group" style="padding-left: 100px;"><label class="col-sm-5 control-label">交易时间：</label><div class="input-group col-sm-7">'+info.add_time+'</div></div>'+
					'<div class="form-group" style="padding-left: 100px;"><label class="col-sm-5 control-label">门店：</label><div class="input-group col-sm-7">'+info.store_name+'</div></div>'+
					'<div class="form-group" style="padding-left: 100px;"><label class="col-sm-5 control-label">操作员：</label><div class="input-group col-sm-7">'+info.skr+'</div></div>'+
				 '</div>';
				  var index=layer.open({
				  title: '兑换成功',
			 	  area: ['500px', '550px'] ,
				  content: html,
				  btn: ['我知道了','打印小票']
				  ,yes: function(index, layero){
				    layer.close(index);
				    $("#container").show();
				    $("#container1").hide();
			    	reset_gd();
			    	$('#container').show();$('#container1').hide();
				  },btn2:function(index,layero){
				  	layer.msg("打印成功");
				  	$("#container").show();
				    $("#container1").hide();
			    	reset_gd();
			    	$('#container').show();$('#container1').hide();
				  }
			});
			
		}else{
			layer.msg(data.msg);
			window.reload();
		}
		
	}
	//清空收货栏
	function reset_gd(){
		cartlist={};
		$("#total_price").text(0);
		$("#goods_cart").html("");
		$("#key").val("");
		$("#member_info").hide();	
		$("#total_exchange_bouns").text(0);
		
	}
	function call_back(msg){
		layer.msg(msg);
		layer.closeAll('iframe');
	}
	function adduser(){
		layer.open({
		  type: 2, 
		  id:"add_member",
		 area: ['1050px', '550px'] ,
		 scrollbar: false,
		  content: '/web/cashier/add_member' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
		}); 
	}
	//顶部导航
	//ajax表单提交
	$("#myForm").submit(function() {
		ajaxForm();
		return false;
	});
</script>
{/block}